<script setup lang="ts">
defineOptions({
  name: "bordBarchart"
});
import { ref, computed, onMounted } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import type { LabelLayoutFunctionType, EchartsInstanceFunctionType } from "@/views/common/components/types";
import modelTitle from "@/views/common/components/modelTitle/index.vue";

interface Props {
  /**  获取当前echarts实例对象，参数为实例对象和回调函数 */
  getEchartsInstance?: EchartsInstanceFunctionType | null;
  /**  获取 optiins 配置函数 */
  labelLayoutFn?: LabelLayoutFunctionType | null;
  /**  同 echarts option */
  options?: CommonEcharts.CommonEchartsOption | null;
  /**  有 title 时传入 */
  title?: string;
  /**单位 */
  unit?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  imageSize?: number;
  /**  数据列表 */
  dataList?: any;
  month?: any;
  dark?: boolean;
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const echartsKey = ref<string>(Math.random().toString(36).slice(2, 10));
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const props = withDefaults(defineProps<Props>(), {
  width: 667,
  height: 167,
  imageSize: 100,
  dark: false
});

// 月度实际
const monthActual = computed(() => props.dataList.monthActual);
// 月度预测
const monthPrediction = computed(() => props.dataList.monthPrediction);
const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);
const itemTitle = computed(() => `${props.title.indexOf("年") !== -1 ? "月" : "日"}`);
const currentYear = new Date().getFullYear();
const currentMonth = props.month;
const valueFormat = Number((Math.floor(Math.random() * (99999 - 10000 + 1)) / 100).toFixed(2));
const yoy = Number(Math.floor(Math.random() * 100).toFixed(2));

onMounted(() => {
  emits("request-data");
});
</script>

<template>
  <div class="energy-desk-content" :class="{ 'model-title-com-dark': dark }">
    <modelTitle v-if="title" :title="title" />
    <div v-if="dataList" class="energy-desk-content-list">
      <div class="content-item">
        <div class="item-title">单位：{{ unit }}</div>
        <div class="item-header">{{ currentMonth + "月度预测：" }}</div>
        <div class="item-header">{{ currentMonth + "月度实际：" }}</div>
      </div>
      <!-- // 月度预测
const monthPrediction = computed(() => props.dataList.monthPrediction);
      // 月度实际
const monthActual = computed(() => props.dataList.monthActual); -->
      <div class="content-item">
        <div class="item-title">能源消耗</div>
        <div class="item-number">{{ Number(monthPrediction.energyCost).toFixed(2) }}</div>
        <div class="item-number">{{ Number(monthActual.energyCost).toFixed(2) }}</div>
      </div>
      <div class="content-item">
        <div class="item-title">环比</div>
        <div class="item-number item-flex" :style="{ color: Number(monthPrediction.cirRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${monthPrediction.cirRadio || "--"}%` }}
          <px-icon v-if="Number(monthPrediction.cirRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(monthPrediction.cirRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
        <div class="item-number item-flex" :style="{ color: Number(monthActual.cirRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${monthActual.cirRadio || "--"}%` }}
          <px-icon v-if="Number(monthActual.cirRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(monthActual.cirRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">同比</div>
        <div class="item-number item-flex" :style="{ color: Number(monthPrediction.simRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${monthPrediction.simRadio || "--"}%` }}
          <px-icon v-if="Number(monthPrediction.simRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(monthPrediction.simRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
        <div class="item-number item-flex" :style="{ color: Number(monthActual.simRadio) > 0 ? '#FF0000' : '#34D399' }">
          {{ `${monthActual.simRadio || "--"}%` }}
          <px-icon v-if="Number(monthActual.simRadio) > 0">
            <Top />
          </px-icon>
          <px-icon v-if="Number(monthActual.simRadio) < 0">
            <Bottom />
          </px-icon>
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}平均消耗</div>
        <div class="item-number">{{ Number(monthPrediction.avgCost).toFixed(2) }}</div>
        <div class="item-number">{{ Number(monthActual.avgCost).toFixed(2) }}</div>
      </div>
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}最大消耗量</div>
        <div class="item-number item-flex">
          {{ monthPrediction.dayMax + "日:" + Number(monthPrediction.maxCost).toFixed(2) }}
          <!-- <px-tag type="error" effect="dark">MAX</px-tag> -->
        </div>
        <div class="item-number item-flex">
          {{ monthActual.dayMax + "日:" + Number(monthActual.maxCost).toFixed(2) }}
          <!-- <px-tag type="error" effect="dark">MAX</px-tag> -->
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">{{ itemTitle }}最小消耗量</div>
        <div class="item-number item-flex">
          {{ monthPrediction.dayMin + "日:" + Number(monthPrediction.minCost).toFixed(2) }}
          <!-- <px-tag type="success" effect="dark">MIN</px-tag> -->
        </div>
        <div class="item-number item-flex">
          {{ monthActual.dayMin + "日:" + Number(monthActual.minCost).toFixed(2) }}
          <!-- <px-tag type="success" effect="dark">MIN</px-tag> -->
        </div>
      </div>
    </div>
    <div class="echarts-chart-com">
      <echartsCom
        ref="echartsComRef"
        :key="echartsKey"
        :dark="dark"
        :getEchartsInstance="getEchartsInstance"
        :labelLayoutFn="labelLayoutFn"
        :options="options"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .energy-desk-content-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;

    .content-item {
      display: flex;
      flex-flow: column wrap;
      gap: 1px;
      justify-content: space-between;
      margin-top: 16px;

      .item-number {
        font-size: 14px;
        white-space: nowrap;

        .px-tag {
          margin-left: 5px;
        }
      }

      .item-flex {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      .item-title {
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
      }

      .item-header {
        font-size: 14px;
        white-space: nowrap;
      }

      .content-item-left {
        display: flex;
        gap: 16px;

        .color-done {
          color: $colorDone;
        }

        .color-total {
          color: $colorTotal;
        }

        .content-icon {
          width: 44px;
          height: 44px;
        }

        .data-text {
          font-size: 22px;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;
        }

        .content-box {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .content-box-label {
            font-weight: 600;
            line-height: 1;
            color: #555;
            white-space: nowrap;
          }

          .content-box-data {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .echarts-chart-com {
    width: 100%;
    height: 180px;
    text-align: center;
    vertical-align: middle;
  }
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .title-text {
    color: #fff;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }
}
</style>
